import React, { Component } from 'react';
import NavBar from '../comnponents/Navbar/NavBar';
import Search from '../pages/search/Search';
import store from '../store';
// import {connect} from 'react-redux';
import {mapState,mapDispatch } from '../store/bindState';
import './common.css'
class Common extends Component {
    constructor(props) {
        super(props)
    
        console.log(props,store.getState().isSearchShow);
        this.state = {
            items:[
                {
                    title:'推荐',
                    path:'/'
                },
                {
                    title:'歌手',
                    path:'/singer'
                },
                {
                    title:'排行榜',
                    path:'/ranking'
                }
            ],
            value:'',
            searchlist:[],
            songs:[]
        }
        this.searchInput = this.searchInput.bind(this)
    }
    goSearch(){
        this.props.history.replace('/search')
    }
    inputChange(e){
        /* console.log(e.target.value);
        console.log(this.props); */
        this.setState(state=>{
            return{
            value:e.target.value
        }
        },()=>{
            if(this.state.value){
                this.$axios([{
                    url:'search/suggest',
                    params:{
                        keywords:this.state.value
                    }
                },{
                    url:'search',
                    params:{
                        keywords:this.state.value
                    }
                }]).then(val=>{
                    //val[0].result.artists[0]  相关歌手
                    //val[0].result.playlists  相关歌单
                    //val[1].result.songs  歌曲列表
                    this.setState(state=>{
                        return{
                            songs:val[0].result? val[0].result : null,
                            searchlist:val[1].result ? val[1].result.songs : null
                        }
                    })
                })
            }
        })}
    componentWillReceiveProps(nextProps){
        console.log(nextProps);
        this.setState(state=>{
            return{
                value:nextProps.listItem
            }
        },()=>{
            this.searchInput()
        })
    }
    inputChange(e){
        console.log(e.target.value);
       /*  console.log(this.props); */
        this.setState(state=>{
            return{
                value:e.target.value
            }
        },()=>{
            this.searchInput()
        })
    }
    searchInput(){
        if(this.state.value){
            this.$axios([{
                url:'search/suggest',
                params:{
                    keywords:this.state.value
                }
            },{
                url:'search',
                params:{
                    keywords:this.state.value
                }
            }]).then(val=>{
                //val[0].result.artists[0]  相关歌手
                //val[0].result.playlists  相关歌单
                //val[1].result.songs  歌曲列表
                this.setState(state=>{
                    return{
                        songs:val[0].result? val[0].result : null,
                        searchlist:val[1].result ? val[1].result.songs : null
                    }
                })
            })
        }
    }
    backClick(){
        this.props.history.go(-1)
    }
    deleteClick(){
        this.setState(state=>{
            return{
                value:''
            }
        })
    }
    //接收子组件传递的数据
    parentFunc(child){
        console.log(child);
    }
    render() {
        console.log(this.props);
        return (
            <div>

                { this.props.isTabBarShow ? //false
                (<div className="fixed">
                    <div className="title">
                        <i className="iconfont icon-mulu"></i> 
                        <div>云音悦</div>
                        <i className="iconfont icon-sousuo" onClick={this.goSearch.bind(this)}></i>
                    </div>
                    <NavBar items={this.state.items} {...this.props}></NavBar>
                </div>)
                : (this.props.isSearchShow ?  //
                (<div>
                    <div className="twoRouter">
                        <i className="iconfont icon-fanhui" onClick={this.backClick.bind(this)}></i>
                        <input type="text" className="tR_input" placeholder="搜索歌曲、歌手、专辑" onChange={this.inputChange.bind(this)} value={this.state.value}/>
                        {this.state.value ? (<i className="iconfont icon-cuowu" onClick={this.deleteClick.bind(this)}></i>) : (<span></span>)}
                    </div>
                    <div className="tRfixed"></div>
                </div>) : null)
                    
                    }
                <div className={this.props.isTabBarShow ? 'box' : ''}>

                </div>
                <div>
                    {
                        this.state.value ? <Search msg={this.parentFunc} songs={this.state.songs} searchlist={this.state.searchlist} value={this.state.value}></Search> : <div>{this.props.children}</div>
                    }
                </div>
            </div>
        );
    }
    componentDidMount(){
        //在页面显示前可以更改store中的state数据。包含返回按钮状态和导航标题
        this.props.changeTitle(this.props.meta.title);
        //第一次路由访问时确定是哪一个tabbar
        this.props.changeBarIndex(this.props.meta.index - 1)
        //如果不是一级路由需要隐藏tabbar true出现 false隐藏
        let show = this.props.meta.deep > 1 ? false : true
        let shows = this.props.meta.deep > 3 ? false : true
        console.log(shows);//在搜索里是 true  在item里是false
        console.log(show); //在搜索里是 false   在item两个false
        this.props.changeSearchShow(shows) //isSears
        this.props.changeBarShow(show) //isbar
        //对需要验证的路由进行处理
        if(this.props.meta.auth){
            
        }else{

        }
    }
}
// mapDispatch向当前组件绑定操作方法。params是否需要向内部传值
// export default mapDispatch(mapState(Common,['isTabBarShow','isSearchShow']),[{type:"changeTitle",params:true},{type:"changeBarIndex",params:true},{type:"changeBarShow",params:true},{type:"changeSearchShow",params:true}]);
export default mapDispatch(mapState(Common,['isTabBarShow','isSearchShow','listItem']),[{type:"changeTitle",params:true},{type:"changeBarIndex",params:true},{type:"changeBarShow",params:true},{type:"changeSearchShow",params:true},{type:'changeInputItem',params:true}]);
